// **********************************************************列表加载
get();

function get() {
  $.ajax({
    url: "/my/article/cates",
    success: function(res) {
      if (res.status == 0) {
        let str = "";
        res.data.forEach(item => {
          str += `<tr>
                  <td>${item.name}</td>
                  <td>${item.alias}</td>
                  <td>
                    <button type="button" class="layui-btn layui-btn-xs btnEdit" data-name="${item.name}" data-alias="${item.alias}" data-id="${item.Id}">编辑</button>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btnDelete" data-id="${item.Id}">删除</button>
                  </td>
                </tr>`;
        });
        $("tbody").html(str);
      }
    }
  });
}


// ************************************************************删除
let layer = layui.layer;
$("tbody").on("click", ".btnDelete", function() {
  // ******************************************不推荐：构成闭包！
  // 1. 获取点击对应id
  // let id = $(this).attr("data-id");

  // layer.confirm("你确认要删除么?", function(index) {

  //   // 2.发送请求
  //   $.ajax({
  //     url: "/my/article/deletecate/" + id,
  //     success: function(res) {
  //       layer.msg(res.message);
  //       if (res.status == 0) {
  //         get();
  //       }
  //     }
  //   })

  // })

  // *******************************************不推荐
  // let that = this;

  // layer.confirm("你确认要删除么?", function(index) {
  //   // 1. 获取点击对应id
  //   let id = $(that).attr("data-id");

  //   // 2.发送请求
  //   $.ajax({
  //     url: "/my/article/deletecate/" + id,
  //     success: function(res) {
  //       layer.msg(res.message);
  //       if (res.status == 0) {
  //         get();
  //       }
  //     }
  //   })

  // });


  // **********************************************call apply bind
  // layer.confirm("你确认要删除么?", function(index) {
  //   let id = $(this).attr("data-id");
  //   $.ajax({
  //     url: "/my/article/deletecate/" + id,
  //     success: function(res) {
  //       layer.msg(res.message);
  //       if (res.status == 0) {
  //         get();
  //       }
  //     }
  //   });
  // }.bind(this))


  // ************************************************箭头函数
  layer.confirm("你确认要删除么?", (index) => {
    // 1. 获取点击对应id
    let id = $(this).attr("data-id");

    // 2.发送请求
    $.ajax({
      url: "/my/article/deletecate/" + id,
      success: function(res) {
        layer.msg(res.message);
        if (res.status == 0) {
          get();
        }
      }
    })
  });


});



// *************************************************************新增
let add_str = `<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
                <div class="layui-form-item">
                  <label class="layui-form-label">类别名称</label>
                  <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">类别别名</label>
                  <div class="layui-input-block">
                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                  </div>
                </div>
               </form>`;


// 1.注册点击
$(".add").click(function() {


  // 2.弹窗:核心方法，仔细读文档
  let index = layer.open({
    type: 1,
    content: add_str,
    title: '添加类别',
    area: ['500px', '250px'],
  });

  // 3.注册提交事件
  $(".add-form").on("submit", function(e) {
    e.preventDefault();

    // 4.收集和提交
    $.ajax({
      url: "/my/article/addcates",
      type: "POST",
      data: $(this).serialize(),
      success: function(res) {
        layer.msg(res.message);
        if (res.status == 0) {
          get();
          layer.close(index);
        }
      }
    })
  });

});










// *************************************************************编辑
let form = layui.form;
let edit_str = `<form class="layui-form edit-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="abc">
                  <div class="layui-form-item">
                    <label class="layui-form-label">类别名称</label>
                    <div class="layui-input-block">
                      <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">类别别名</label>
                    <div class="layui-input-block">
                      <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <input type="hidden" name="Id">
                      <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                    </div>
                  </div>
                </form>`;

$("tbody").on("click", ".btnEdit", function() {
  // 0.回到页面列表生成的代码，name别名、id设置自定义属性绑定在每个编辑按钮上
  //   把点击该项对应的数据获取到；自定义属性设置多次！
  let Id = $(this).attr("data-id");
  let name = $(this).attr("data-name");
  let alias = $(this).attr("data-alias");


  // 1.准备一个弹窗
  let index = layer.open({
    type: 1,
    content: edit_str,
    title: '编辑类别',
    area: ['500px', '250px'],
  });


  // 2.对弹窗内form进行赋值
  form.val("abc", {
    name: name,
    alias: alias,
    Id: Id
  });


  // 3.提交
  $(".edit-form").on("submit", function(e) {
    e.preventDefault();

    // 4.收集和提交
    $.ajax({
      url: "/my/article/updatecate",
      type: "POST",
      data: $(this).serialize(),
      success: function(res) {
        layer.msg(res.message);
        if (res.status == 0) {
          get();
          layer.close(index);
        }
      }
    })
  });



})